<template>
  <div class="loginPage">
    <md-progress-spinner
      v-if="showLoading"
      class="md-accent"
      :md-diameter="30"
      :md-stroke="3"
      md-mode="indeterminate"
    ></md-progress-spinner>
    <md-content>
      <div class="md-layout">
        <div class="md-layout-item md-xsmall-hide">
          <img src="../assets/images/loginPic1.jpeg" />
        </div>
        <div class="md-layout-item">
          <form>
            <h1>Welcome</h1>
            <md-field md-clearable :class="userMsgClass">
              <label>用户名</label>
              <md-input v-model="username" />
              <span class="md-error">{{ usernameERR }}</span>
            </md-field>
            <md-field :class="pwdMsgClass">
              <label>密码</label>
              <md-input v-model="password" type="password" />
              <span class="md-error">{{ passwordERR }}</span>
            </md-field>
            <md-button @click="handleLogin" class="md-raised md-primary"
              >登录</md-button
            >
          </form>
        </div>
      </div>
    </md-content>
  </div>
</template>
<script>
import API from '@/api/api_user.js'
export default {
  data: () => ({
    username: '',
    password: '',
    userMsg: false,
    pwdMsg: false,
    usernameERR: '',
    passwordERR: '',
    showLoading: false
  }),
  computed: {
    userMsgClass () {
      return {
        'md-invalid': this.userMsg
      }
    },
    pwdMsgClass () {
      return {
        'md-invalid': this.pwdMsg
      }
    }
  },
  methods: {
    handleLogin () {
      const params = {
        username: this.username,
        pwd: this.password
      }
      if (!this.username.length) {
        this.userMsg = true
        this.usernameERR = '用户名不能为空'
        return
      }
      if (!this.password.length) {
        this.pwdMsg = true
        this.passwordERR = '密码不能为空'
        return
      }
      this.showLoading = true

      API.login(params)
        .then(res => {
          this.showLoading = false
          if (res.errcode) {
            console.log(res.errcode)
            if (res.errcode === 3) {
              this.userMsg = true
              this.usernameERR = res.errmsg
            }
            if (res.errcode === 4) {
              this.pwdMsg = true
              this.passwordERR = res.errmsg
            }
          } else {
            localStorage.setItem('access_user', JSON.stringify(res))
            this.$store.commit('setSessionInvalid', false)
            this.$store.commit('setUserInfo', res)
            this.$router.push('/')
          }
        })
        .catch(err => {
          this.showLoading = false
          console.log('err:', err)
        })
    }
  },
  watch: {
    username: function (newVal, oldVal) {
      if (newVal.length) {
        this.userMsg = false
        this.usernameERR = ''
      }
    },
    password: function (newVal, oldVal) {
      if (newVal.length) {
        this.pwdMsg = false
        this.passwordERR = ''
      }
    }
  }
}
</script>
<style lang="less" scoped>
.loginPage {
  height: 100vh;
  background: #448aff;
  display: flex;
  align-items: center;
  justify-content: center;
  .md-progress-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
.md-content {
  box-sizing: border-box;
  padding: 20px;
  width: 60%;
  border-radius: 10px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.md-layout-item {
  display: flex;
  align-items: center;
}
form {
  padding: 0 30px;
  width: 100%;
}
</style>
